import cn from 'classnames';
import Image from 'next/image';

import Green from '../../images/allergy-green.svg';
import Red from '../../images/allergy-red.svg';
import Yellow from '../../images/allergy-yellow.svg';
import { ColouredInfoBlock } from '../ColouredInfoBlock';
import cs from './Allergy.module.scss';

export const Allergy = () => (
  <ColouredInfoBlock className={cs.block} reverseResponsive>
    <h2 className="h2">Аллергия</h2>
    <p className={cn('p-reversed', cs.descr)}>
      Отмечайте продукты, на&nbsp;которые замечена аллергическая реакция
      <span className="hide-less-sm"> или непереносимость</span>
    </p>
    <div className={cs.flex}>
      <Image alt="red" className={cs.red} height={106} src={Red} width={106} />
      <div className={cs.text} />
      <div className={cs.images}>
        <Image alt="green" height={106} src={Green} width={106} />
        <Image alt="yellow" height={106} src={Yellow} width={106} />
      </div>
    </div>
  </ColouredInfoBlock>
);
